<template>
    <div>
        <!-- mui 中  card.html 页面的案例 -->
        <!-- 商品轮播图区域 -->
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<swiper :imgList="lunbotu"></swiper>
					</div>
				</div>
			</div>
        

        <!-- 商品购买区域 -->
        <div class="mui-card">
				<div class="mui-card-header">页眉</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
					</div>
				</div>
			</div>


        <!-- 商品参数区域 -->
      <div class="mui-card">
				<div class="mui-card-header">页眉</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
					</div>
				</div>
				<div class="mui-card-footer">页脚</div>
			</div>


   
    </div>
</template>
<script>
//导入轮播图组件
import swiper from "../subComponents/swiper.vue"
import {Toast} from 'mint-ui'
export default {
  data(){
    return{
      lunbotu:[],//用于保存后台获取的数据
      id:this.$route.params.id//获取路由上传过来的id
    }
  },
  created() {
    this.getRotaionPic()
  },
  methods:{
    //从后台获取轮播部分图片[商品的详情图]
    getRotaionPic(){
      this.$http.get("goods.json").then(result =>{
        if (result.body) {
          var obj = result.body.filter(item =>{
            if (item.id == this.id) {
              return item
            }
          })[0]
          this.lunbotu = obj.pic
        } else {
          Toast("获取数据失败！！！")
        }
      })
    }
  },
  components:{
    swiper,//在vue中注册组件
  }
}
</script>



<style lang="scss" scoped>
.goodsinfo-container {
  background-color: #eee;
  overflow: hidden;

  .now_price {
    color: red;
    font-size: 16px;
    font-weight: bold;
  }

  .mui-card-footer {
    display: block;
    button {
      margin: 15px 0;
    }
  }

  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    z-index: 99;
    top: 390px;
    left: 146px;
  }
}
</style>
